<template>
<div>
 <el-descriptions title="医生个人信息" :column="3" border>
  <el-descriptions-item label="用户名" label-class-name="my-label" content-class-name="my-content" >
    <el-input v-model="this.doctor_form.dname"></el-input>
  </el-descriptions-item>
  
  <el-descriptions-item label="年龄">
    <el-input v-model="this.doctor_form.dage"  ></el-input>

  </el-descriptions-item>
  <el-descriptions-item label="头像" :contentStyle="{'width': '100px','height':'100px'}">
    <div>
      <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
    </div>
    </el-descriptions-item>
  
  <el-descriptions-item label="性别">
    <el-input v-model="this.doctor_form.dsex"  ></el-input>

  </el-descriptions-item>
  <el-descriptions-item label="手机号">
    <el-input v-model="this.doctor_form.dtel"  ></el-input>

  </el-descriptions-item>
  <el-descriptions-item label="资格证书" :contentStyle="{'width': '100px','height':'100px'}">
    <img :src="this.doctor_form.dcertificate" class="picture" />
    </el-descriptions-item>
  <el-descriptions-item label="身份证号">
    <el-input v-model="this.doctor_form.dcard"  ></el-input>

  </el-descriptions-item>
  
  <el-descriptions-item label="毕业院校">
    <el-input v-model="this.doctor_form.school"  ></el-input>
  </el-descriptions-item>
  <el-descriptions-item label="学历">
    <el-input v-model="this.doctor_form.education"  ></el-input>
  </el-descriptions-item>
  <el-descriptions-item label="所属医院">

    <el-input v-model="this.doctor_form.dhospital"  ></el-input>

  </el-descriptions-item>
  <el-descriptions-item label="职称">
    <el-input v-model="this.doctor_form.title"  ></el-input>

  </el-descriptions-item>
  <el-descriptions-item label="科室名称">
    <el-input v-model="this.doctor_form.depid"  ></el-input>

  </el-descriptions-item>
  <el-descriptions-item label="联系地址" :contentStyle="{'text-align': 'right'}">
    <el-input v-model="this.doctor_form.daddress"  ></el-input>
  </el-descriptions-item>
</el-descriptions>
 <el-button type="primary" @click="updateDoctor">修改个人信息</el-button>
  <el-button type="info" @click="outinfo">退出</el-button>
  <hr/>
  <el-row>
    <el-col :span="12">
        <el-upload
          action="http://localhost:8000/doctor-serv/upload/dcertificate"
          list-type="picture-card"
          :on-success="handleSuccess"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
        <label>上传医师资格证</label>
    </el-col>
    
  </el-row>
</div>
</template>


<script>
export default {
  mounted(){
    this.doctor_init();
  },
  data(){
    return{
      doctor_form:{
        // did:"",
        // dname:"",
        // dage:"",
        // dimage:"",
        // dsex:"",
        // dtel:"",
        // dcertificate:"",
        // dcard:"",
        // school:"",
        // education:"",
        // dhospital:"",
        // title:"",
        // depid:"",
        // daddress:"",

      },
      // 上传用户头像
      dialogImageUrl: '',
      dialogVisible: false
    }
  },
  methods:{
    //初始化医生信息
    doctor_init(){
      //获取sessionstorage中的uid，根据uid去查找医生信息
      //收集参数
      let uid=sessionStorage.getItem("uid");
      //发送请求 暂时先用假数据uid
      this.$axios.get("/doctor-serv/doctor/getDoctorByUid/6")
      // 处理响应
      .then(resp=>{
        let r=resp.data;
        if(r.code==200){
          this.doctor_form=r.data;
        }else{
          this.$message.error("获取医生信息出错！");
        }
      });
      
    },
    // 资格证书上传
    handleRemove(file, fileList) {
        console.log(file, fileList);
      },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //成功回调函数
    handleSuccess(resp){
      console.log(resp.data);
      let r=resp.data;
        // 替换原始图片
        this.doctor_form.dcertificate=r;

      console.log(this.doctor_form);
      // 此时开始另起一个任务将图片地址保存到数据库
      this.$axios.post("doctor-serv/doctor/update",this.doctor_form)
      //处理响应
      .then(resp=>{
        let rsult= resp.data;
        if(rsult.code==200){
          this.$message.success("上传证书成功！");
          return;
        }
        this.$message.error("上传证书失败！")
      });
    },
    // 修改个人信息
    updateDoctor(){
      console.log(this.doctor_form);
      this.$axios.post("doctor-serv/doctor/update",this.doctor_form)
      //处理响应
      .then(resp=>{
        let rsult= resp.data;
        if(rsult.code==200){
          this.$message.success("修改个人信息成功！");
          return;
        }
        this.$message.error("修改失败！")
      });
    },
    //退出该页面 
    outinfo(){

    }

  },

}
</script>

<style scoped>
   .my-label {
    background: #E1F3D8;
  }

  .my-content {
    background: #FDE2E2;
  }


</style>